<script setup>
import { nextTick, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { chatHooks } from './js/chat'
import { VMarkdownView } from "vue3-markdown";
import 'vue3-markdown/dist/style.css'
let {
  text,
  list,
  scrollToBottom,
  disabled,
  stopAnswer,
  bigModel
} = chatHooks()

import { serviceHooks } from "../components/voiceservice/serviceHooks.js";
const { btnControlclick, statusTextComputed, resultComputed ,isStopComputed} = serviceHooks();




//获取输入框内的内容
const message = ref("")
// const list = ref([])
// const disabled = ref(false)

watch(resultComputed,()=>{
  message.value = resultComputed.value
},{
  deep: true 
})
// 发送聊天消息
const send = () => {
  if (message.value.trim().length <= 0)
    return ElMessage.error("消息不能为空哦");

  disabled.value = true;
  // 右侧聊天
  list.value.push({
    left: false,
    message: message.value,
  });
  // TODO1: 
  text.value.push({
    role: "user",
    content: message.value,
  });

  // 存储机器人回答的消息
  list.value.push({ left: true, message: '', tips: true })
  // TODO2: 暂时注释
  scrollToBottom();
  bigModel.value.start(message.value)
  message.value = ''
};
// 格式化时间
const formatCurrentTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, "0");
  const day = now.getDate().toString().padStart(2, "0");
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  const seconds = now.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

</script>

<template>
  <div class="chat-com-content-wrap" data-v-e63fc337="">
    <div class="chat-content" data-v-e63fc337="">
      <div class="chandler-content_main-board" data-v-e63fc337="">
        <div class="chandler-ext-content_communication-wrap" data-v-e1b6fd87="" data-v-e63fc337="">
          <div class="chandler-ext-content_communication-group" data-v-e1b6fd87="">

            <ul style="width: 100%;height: 100%;">
              <template v-for="(item, index) in list" :key="index">
                <!-- 用户 -->
                <li v-if="!item.left" id="user-chat-question-1" :key="index">
                  <!-- 用户那一行 -->
                  <div class="user-wrap" data-v-e1b6fd87="" style="position: relative;">
                    <div class="question">
                      <el-row :gutter="5" style="margin:0 5px;font-size: 12px;display: flex;justify-content: flex-end;">
                        {{ formatCurrentTime() }}
                      </el-row>
                      <el-row :gutter="5" style="display: flex;justify-content: flex-end;">
                        <div class="flex flex-col items-end" data-v-e1b6fd87="">
                          <div class="user" data-v-e1b6fd87="" style="margin-right: 10px;">
                            <!-- <div class="chandler-ext-content_communication-file-wrap" data-v-e1b6fd87=""></div> -->
                            <div class="chandler-ext-content_user-content" data-v-e1b6fd87="">
                              {{ item.message }}
                              <!-- {{ message }} -->
                            </div>
                          </div>
                        </div>
                      </el-row>
                    </div>
                    <div class="user_img">
                      <div style="height: 60px;width: 60px;">
                        <div
                          style="height: 50px;width: 50px;border: 2px solid #21aa93;border-radius: 50% !important;background-image: url(https://b0.bdstatic.com/337bc39b6880696d8c230d9e09232732.jpg@h_1280);background-position: center;background-size: contain;background-repeat: no-repeat;position: absolute;bottom: 0;">
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <!-- 讯飞星火Ai -->
                <li v-else>


                  <!-- chat输出 -->
                  <div class="chandler-ext-content_communication-wrap-ai-wrap finish" data-v-e1b6fd87=""
                    style="margin-left: -40px;position: relative;">
                    <!-- 白色气泡的区域 -->
                    <div class="user_img">
                      <div style="height: 60px;width: 60px;margin-top: -20px;">
                        <div
                          style="margin-top: 0px;height: 50px;width: 50px;border-radius: 50% !important;background-image: url(https://xinghuo.xfyun.cn/static/media/gpt-logo.e9ad4150a385435f5a90b50c44dad847.svg);background-position: center;background-size: contain;background-repeat: no-repeat;position: absolute;top: 0;">
                        </div>
                      </div>
                    </div>
                    <div class="answer_ai" style="max-width: 85%;">
                      <el-row :gutter="5"
                        style="margin:0 5px;font-size: 12px;display: flex;justify-content: flex-start;">
                        {{ formatCurrentTime() }}
                      </el-row>
                      <el-row :gutter="5" style="display: flex;justify-content: flex-start;">
                        <div class="chandler-ext-content_communication-wrap-ai" data-v-e1b6fd87="">
                          <div class="speaker" data-v-e1b6fd87="">
                            讯飞星火Ai
                          </div>
                          <div class="chandler-ext-content_communication-p" data-v-e1b6fd87="">
                            <div
                              class="chandler-ext-content_communication-p-inner chandler-ext-content_communication-p-inner-1721123918102 finish"
                              data-v-e1b6fd87="">
                              <div class="chandler-aireply-wrap" data-message-id="c5b99dbb-c959-4050-bf16-4958fbcff704"
                                data-conversation-id="78f4b00f-fbe3-476f-87b4-3d1f6b307b9b"
                                data-conversation-message-id="c5b99dbb-c959-4050-bf16-4958fbcff704">
                                <!-- <div>{{ message }}</div> -->

                                <VMarkdownView :mode="mode" :content="item.message"></VMarkdownView>
                                <p v-if="item.tips" @click="stopAnswer" class="answers">
                                  停止回答
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-row>
                    </div>
                  </div>
                </li>
              </template>
            </ul>


          </div>
        </div>
      </div>
      <!-- 新添加——清空页面上的记录
      <div class="new-chat-wrap" data-v-32c93452="" data-v-e63fc337="">
        <div class="flex" data-v-32c93452="">
          <el-button icon="Monitor" text class="new-chat" data-v-32c93452="" style="padding: 15px;"
            @click="clearAll">Clear</el-button>
        </div>
      </div> -->
      <!-- 输入框的总体 -->
      <div class="chandler-content_main-bottom" data-v-e63fc337="">
        <div class="chandler-content_input-box" data-v-41ebc2a6="" data-v-e63fc337="">
          <div class="chandler-content_input-box-content" data-v-41ebc2a6="">
            <div class="top" data-v-41ebc2a6="">
              <textarea class="chandler-content_input-area" placeholder="问输入想问的内容..." data-v-41ebc2a6=""
                v-model="message" col="120" rows="1" @keyup.enter="send" :disabled="disabled"></textarea>
            </div>
            <div class="bottom" data-v-41ebc2a6="">
              <!-- 右边发送 -->
              <div class="right" data-v-41ebc2a6="" style="position: absolute;right: 20px;bottom: 15px;">
                <el-button icon="Promotion" type="info" circle :disabled="disabled" @click="send"
                  style="height: 50px;width: 50px;font-size: 25px;">
                  <!-- {{ disabled ? "回答中..." : "发送" }} -->
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div   @click="btnControlclick"  class="isrecording" style="position: relative;height: 150px;width: 300px;bottom: 280px;left:calc(40%) ;">

    <div class="delightIcon" style="position: absolute; bottom: 45px; right: calc(50% - 130px);">
      <el-button icon="Microphone"
        style="width: 100px;height: 100px;font-size: 45px;position: absolute;bottom: -15px;left: calc(30% ); " circle
        type="primary"></el-button>
      <img class="van-icon__image" src="./img/download.png">
    </div>
    <div class="speakTxt" style="position: absolute; bottom: 0px; right: calc(50% - 20px);transform: translate(27px, 5px);">{{statusTextComputed}}</div>
  </div>


</template>

<style scoped>
.chat-com-content-wrap[data-v-e63fc337] {
  width: 100%;
  height: calc(100% - 46px);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 16px auto 0;
  border-radius: 36px;
  background: rgba(255, 255, 255, .32);
  overflow: hidden;
}

.chat-com-content-wrap .chat-content[data-v-e63fc337] {
  width: 100%;
  height: calc(100% - 56px);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  user-select: text;
}

.chat-com-content-wrap .chandler-content_main-board[data-v-e63fc337] {
  width: 100%;
  overflow-y: auto;
  flex: 1 1 0%;
  overscroll-behavior: contain;
  margin: 30px 0 0;
}

.chandler-ext-content_communication-wrap[data-v-e1b6fd87] {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px 28px;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group[data-v-e1b6fd87] {
  width: 100%;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .user-wrap {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.items-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .user-wrap .user[data-v-e1b6fd87] {
  padding: 12px 18px 12px 12px;
  border-radius: 22px 22px 0;
  /* 用户气泡 */
  background: #ffc800;
  font-size: 16px;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .user-wrap .chandler-ext-content_user-content[data-v-e1b6fd87] {
  white-space: pre-wrap;
  word-break: break-word;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap[data-v-e1b6fd87] {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai[data-v-e1b6fd87] {
  max-width: 100%;
  padding: 10px 12px 12px;
  border-radius: 0 22px 22px;
  background: #fff;
  font-size: 16px;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai .speaker[data-v-e1b6fd87] {
  text-align: left;
  margin-bottom: 4px;
  font-size: 12px;
  /* ai文字 */
  color: #ffba43;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai .speaker .chandler-ext-content_communication-wrap-ai-ctrl[data-v-e1b6fd87] {
  display: inline-flex;
  align-items: center;
  flex: 0;
  flex-shrink: 0;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai .speaker .chandler-ext-content_communication-wrap-ai-ctrl-copy[data-v-e1b6fd87] {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  display: block;
  background: url(./copy.a609a2c2.svg) no-repeat center;
  background-size: 16px;
  transition: .2s all linear;
  cursor: pointer;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-p[data-v-e1b6fd87] {
  text-align: left;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-p .chandler-ext-content_communication-p-inner[data-v-e1b6fd87] {
  overflow-wrap: break-word;
  word-break: normal;
  transform: translateZ(0);
  white-space: pre-wrap;
  will-change: transform;
  color: #000;
}

.markdwon-container *,
.chandler-aireply-wrap *,
.chandler-ext-content_communication-p-inner * {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.markdwon-container p,
.chandler-aireply-wrap p,
.chandler-ext-content_communication-p-inner p {
  display: inline;
  line-height: 1.5;
}


.chat-com-content-wrap .new-chat-wrap[data-v-e63fc337] {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 16px;
}

.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

.new-chat-wrap .new-chat[data-v-32c93452] {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  gap: 8px;
  cursor: pointer;
  transition: all .3s linear;
}

img,
svg,
iframe,
canvas,
video {
  display: block;
  vertical-align: middle;
}

.chandler-content_input-box[data-v-41ebc2a6] {
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 0 12px 12px;
}

.chandler-content_input-box .chandler-content_input-box-content[data-v-41ebc2a6] {
  width: 100%;
  background: rgba(255, 255, 255, .72);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  /* 底边 */
  box-shadow: 0 3px #ffc800;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

/* 输入框 */
.chandler-content_input-box .chandler-content_input-box-content .top[data-v-41ebc2a6] {
  flex: 1;
  width: 100%;
  padding: 0 14px;
}

.chandler-content_input-box .chandler-content_input-box-content .chandler-content_input-area[data-v-41ebc2a6] {
  resize: none;
  width: 93%;
  padding: 12px 0;
  height: 11vh;
  max-height: 100px;
  min-height: 60px;
  border: unset;
  color: #413659;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  outline: none;
  box-sizing: border-box;
  background: transparent;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom[data-v-41ebc2a6] {
  padding: 8px 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .left[data-v-41ebc2a6] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .left .paperclip[data-v-41ebc2a6] {
  background: url(./paperclip.2a2553e6.svg) no-repeat center;
}

.el-upload {
  --el-upload-dragger-padding-horizontal: 40px;
  --el-upload-dragger-padding-vertical: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: 0;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .left .paperclip[data-v-41ebc2a6] {
  background: url(./paperclip.2a2553e6.svg) no-repeat center;
}

a,
area,
button,
[role=button],
input:not([type="range"]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

.el-upload-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .right[data-v-41ebc2a6] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .right .chandler-peculiarity[data-v-41ebc2a6] {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .right .send.unable[data-v-41ebc2a6] {
  height: 50px;
  width: 50px;
  /* color: red; */
  background-color: #c0c5cc;
  border-radius: 50%;
}

li {
  list-style: none;
}
</style>
